[...filename].tsx (1690B)
1 import { Post } from "../../components/posts/post"; 2 import { client } from "../../tina/__generated__/client"; 3 import { useTina } from "tinacms/dist/react"; 4 5 import { InferGetStaticPropsType } from "next"; 6 import Layout from "../../components/layout/layout"; 7 // Use the props returned by get static props 8 export default function BlogPostPage( 9 props: InferGetStaticPropsType<typeof getStaticProps> 10 ) { 11 const { data } = useTina({ 12 query: props.query, 13 variables: props.variables, 14 data: props.data, 15 }); 16 if (data && data.post) { 17 return ( 18 <Layout rawData={data} data={data.global}> 19 <Post {...data.post} /> 20 </Layout> 21 ); 22 } 23 return ( 24 <Layout> 25 <div>No data</div>; 26 </Layout> 27 ); 28 } 29 30 export const getStaticProps = async ({ params }) => { 31 const relativePath = Array.isArray(params.filename) 32 ? `${params.filename.join("/")}.mdx` 33 : `${params.filename}.mdx`; 34 35 const tinaProps = await client.queries.blogPostQuery({ 36 relativePath, 37 }); 38 39 return { 40 props: { 41 ...tinaProps, 42 }, 43 }; 44 }; 45 46 /** 47 * To build the blog post pages we just iterate through the list of 48 * posts and provide their "filename" as part of the URL path 49 * 50 * So a blog post at "content/posts/hello.md" would 51 * be viewable at http://localhost:3000/posts/hello 52 */ 53 export const getStaticPaths = async () => { 54 const postsListData = await client.queries.postConnection(); 55 56 return { 57 paths: postsListData.data.postConnection.edges.map((post) => ({ 58 params: { filename: post.node._sys.filename.split("/") }, 59 })), 60 fallback: "blocking", 61 }; 62 }; 63 64 export type PostType = InferGetStaticPropsType< 65 typeof getStaticProps 66 >["data"]["post"];